<style lang="scss" scoped>
	// 头部
	page {
		overflow: hidden !important;
	}

	.order-hd {
		position: relative;
		margin-top: 60rpx;
		width: 750rpx;
		// height: 110rpx;
		// height: 50%;
		// background: pink;
		border-bottom: 1px solid #f3f3f7;
		display: flex;
		justify-content: start;
		box-sizing: border-box;
		line-height: 110rpx;

		.hd-left {
			width: 100rpx;
			height: 110rpx;
			text-align: center;
			font-size: 36rpx;
			color: #333333;
		}

		.hd-right {
			width: 400rpx;
			height: 110rpx;

			input {
				display: block;
				flex-shrink: 0;
				height: 50rpx;
				// border: 1rpx solid #000;
				border-radius: 30rpx;
				margin: 32rpx 10rpx;
				padding-left: 50rpx;
				background: #f3f3f7;
			}
		}

		.soso {
			position: absolute;
			top: 1px;
			left: 120rpx;
			color: #bfbfbf;
		}
	}

	// 地址
	.xh-position {
		width: 750rpx;
		// height: 250rpx;;
		// background: pink;
		overflow: hidden;
		border-bottom: 1px solid #f3f3f7;

		// 地址标题
		.position-title {
			margin-top: 10rpx;
			display: flex;
			justify-content: start;
			font-weight: 600;

			.sochang {
				color: #919191;
				display: block;
				margin: 5rpx 10rpx 0rpx 10rpx;
				// vertical-align: middle;
			}

			.gen {
				display: block;
				margin-top: 8rpx;
			}
		}

		// 地址
		.position-address {
			color: #919191;
			display: flex;
			margin: 10rpx 0rpx;

			.addresss {
				display: block;
				margin: 5rpx 10rpx 0rpx 10rpx;
			}
		}

		// 更多
		.xh-gengduo {
			width: 750rpx;
			height: 50rpx;
			display: flex;
			margin-top: 10rpx;
			color: #919191;

			swiper {
				width: 550rpx;
				height: 50rpx;
				color: #fc3f41;

				.tubiao {
					color: #fc3f41;
					display: block;
					margin: 5rpx 10rpx 0rpx 10rpx;
				}

				swiper-item {
					display: flex;

				}

			}

			.position-list {
				display: flex;

			}
		}

		// 导航
		.top-nav {
			position: relative;
			width: 750rpx;
			// height: 11%;
			display: flex;
			justify-content: space-evenly;

			.navitem {
				height: 50rpx;
				margin-top: 25rpx;
				color: #919191;
				transition: all .1s;
			}

			.active {
				color: #000;
				border-bottom: 2px solid #fc3f41;
			}
		}

	}

	// 主体
	.xh-content {
		box-sizing: border-box;
		position: fixed;
		width: 750rpx;
		height: 1050rpx;
		// background: pink;
		display: flex;
		justify-content: start;

		.cont-left {
			width: 200rpx;
			text-align: center;
			// background: orange;
			background: #f8f8f8;
			overflow-y: auto;

			&::-webkit-scrollbar {
				display: none;
			}

			.scrollitem {
				text-align: center;
				width: 200rpx;
				height: 100rpx;
				line-height: 100rpx;
				background: #f1f1f1;
				color: #777;
				font-size: 30rpx;
				// overflow-y: auto;



				&:hover {
					background: #fff;
				}
			}
		}

		.cont-right {
			overflow: auto;
			width: 550rpx;

			.contswiper {
				box-sizing: border-box;
				margin: 10rpx;
				border-radius: 20rpx;
				overflow: hidden;
			}


			.scrollgoods {
				position: relative;
				display: flex;
				justify-content: start;
				width: 550rpx;
				height: 160rpx;
				overflow-y: hidden;

				&::-webkit-scrollbar {
					display: none;
				}

				&:hover {
					background: #f3f3f7;
				}

				.left {
					image {
						width: 120rpx;
						height: 120rpx;
						margin: 20rpx;
						border-radius: 20rpx;
					}
				}

				.right {
					margin-top: 20rpx;

					.goods-title {
						font-weight: 600;
					}

					.goods-emit {
						margin-top: 30rpx;
					}

					.jia {
						position: absolute;
						bottom: 10rpx;
						right: 20rpx;
						background-color: #e60012;
						border-radius: 50rpx;
						// padding: 5rpx;
						color: #fff;
						font-size: 40rpx;
						padding: 5rpx;
					}
				}
			}
		}
	}

	.box {
		margin-bottom: 350rpx;
	}

	// 购物车
	.cart {
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		width: 750rpx;
		height: 100rpx;
		background: #fff;
		display: flex;
		justify-content: space-between;

		.cart-l {
			position: relative;
			width: 200rpx;
			height: 100rpx;

			.cartcount {
				width: 100rpx;
				height: 100rpx;
				font-size: 60rpx;
				color: #f6373f;
				padding: 20rpx;

			}

			.counts {
				position: absolute;
				top: 10rpx;
				left: 80rpx;
				color: #fff;
				width: 50rpx;
				height: 50rpx;
				border-radius: 50px;
				font-size: 30rpx;
				background: #ff9f00;
				padding-top: 10rpx;
				text-align: center;

			}
		}

		.cart-r {
			display: flex;
			justify-content: center;
			align-items: center;

			.cartprice {
				margin-right: 25rpx;

				text {
					font-weight: 600;
				}

			}

			button {
				margin-right: 10rpx;
			}
		}
	}
</style>
<template>
	<!-- 头部 -->
	<view class="order-hd">
		<view class="hd-left">自提</view>
		<view class="iconfont icon-sousuo soso"></view>
		<view class="hd-right"><input type="text" placeholder="茉莉奶绿"></view>
	</view>
	<!-- 地址 -->
	<view class="xh-position">
		<!-- 地址标题 -->
		<view class="position-title">
			<i class="iconfont icon-shoucang sochang"></i>
			<view>蜜雪冰城北京路店 </view>
			<i class="iconfont icon-gengduo2 gen"></i>
		</view>
		<!-- 地址 -->
		<view class="position-address">
			<i class="iconfont icon-weizhi addresss"></i>
			直线距离122m
		</view>
		<view class="xh-gengduo re">
			<swiper vertical circular autoplay interval="1800">
				<swiper-item><i class="iconfont icon-huo tubiao"></i><text>珍爱生命远离瑞星</text></swiper-item>
				<swiper-item><i class="iconfont icon-dianhua tubiao"></i><text>珍爱粮食按需点餐</text></swiper-item>
				<swiper-item><i class="iconfont icon-shipinmianshi tubiao"></i><text>兄弟,来一杯迈瑞米吗,你请我</text></swiper-item>
			</swiper>
			<view class="position-list">查看更多 <i class="iconfont icon-gengduo2"></i></view>
		</view>
		<view class="top-nav">
			<view class="navitem" v-for="(item,index) in tab" :class="index === i ? `active` : ``" @click="tabs(index)">
				{{item}}
			</view>

		</view>
	</view>
	<!-- 主体 -->
	<view class="xh-content">
		<view class="cont-left">
			<scroll-view class="scrolleft">
				<view class="scrollitem" @click="togs(item.inds)" v-for="(item,index) in goodslist?.list">{{item.text}}
				</view>
				<view class="box"></view>
			</scroll-view>
		</view>
		<view class="cont-right" autoplay>
			<swiper class="contswiper">
				<swiper-item v-for="item in swiper">
					<image :src="item.imgs" mode=""></image>
				</swiper-item>

			</swiper>
			<scroll-view class="scrollright">
				<view class="scrollgoods" v-for="item in toglist[togitem]" @click="godeta(item.id)">
					<view class="left">
						<image :src="item.imgs" mode=""></image>
					</view>
					<view class="right">
						<view class="goods-title">{{item.moreName}}</view>
						<view class="goods-emit">
							<view class="prices">￥<text>{{item.morePirce}}</text></view>
							<view class="jia "><i class="iconfont icon-gengduo1"></i></view>
						</view>
					</view>
				</view>
				<view class="box"></view>
			</scroll-view>
		</view>
	</view>
	<!-- 购物车 -->
	<view class="cart" >
		<view class="cart-l">
			<view class="cartcount iconfont icon-gouwucheman"></view>
			<i class="counts"><text>{{nums || 0}}</text></i>
		</view>
		<view class="cart-r">
			<view class="clear" style="margin-right: 20rpx; font-size: 30rpx; color: #ccc;" @click="clear">清空</view>
			<view class="cartprice">合计: <text>{{totals}}</text> </view>
			<button type="warn" @click="jiesuan">去结算</button>
		</view>
	</view>


</template>

<script setup>
	import {
		computed,
		onUpdated,
		ref, watch,
	} from 'vue'
	import {
		getSwiper
	} from '../../api/'
	import {
		getOrderList
	} from '../../api/order';
	import {
		getDetaList
	} from '../../api/deta';
	import { onShow } from '@dcloudio/uni-app'
	import { getbuyone } from '../../api/publish';
	import { buyone } from '../../api/deta';
	const tab = ref(['经典菜单', '双杯9.9起', '门店促销', '我的常点']) //tab栏
	let i = ref(0) //信号量
	const swiper = ref([])
	const goodslist = ref([]) //渲染数据
	const toglist = ref({}) //切换的数据
	const togitem = ref('newgoods') //切换的数据
	// const cartlist = ref({}) //购物车数据
	let nums = ref(0)  //总量
	let totals =ref(0) //总价
	let getbuy = ref(0)
	let goods = ''
	let dt = ''
	const render = async () => {
		const res = await getOrderList()
		const wpr = await getSwiper()
		const res2 = await getbuyone()
		// console.log(res.data)
		goodslist.value = res.data
		swiper.value = wpr.data
		getbuy.value = res2.data
		// console.log(swiper.value ,'轮播图')
		toglist.value = goodslist.value?.goods
		//获取数据
		dt = uni.getStorageSync('xw_goods')
		if(dt.length > 0) goods = JSON.parse(uni.getStorageSync('xw_goods')) || []
		
		console.log(getbuy.value)
		nums.value = nums.value = getbuy.value.goods.reduce((prev, item) => prev += item.counts, 0) 
		totals.value =  getbuy.value.goods.reduce((prev, item) => prev += item.counts * item.price, 0)
	}
	render()


	

	const tabs = (index, e) => {
		i.value = index
	}
   onShow(()=>{
	  let goods =uni.getStorageSync('xw_goods')? JSON.parse(uni.getStorageSync('xw_goods')) : []
	 nums.value =  goods?.reduce((prev, item) => prev + item.counts, 0) 
	 totals.value =  goods?.reduce((prev, item) => prev + item.counts * item.price, 0) 
	 console.log(nums.value, totals.value,'购物车+++')
   })

	// 切换
	const togs = (item) => {
		togitem.value = item
	}

	// 跳转详情
	const godeta = async (id) => {
		console.log(id)
		uni.removeStorage('xue')
		uni.setStorageSync('xue', id);
		uni.navigateTo({
			url: '/pages/details/details'
		});

	}


	const jiesuan = async () => {
		let data = uni.getStorageSync('xw_goods')
		if(!data) return 
		goods = JSON.parse(uni.getStorageSync('xw_goods')) || []
		const res = await buyone(goods)
		
		uni.navigateTo({
			url: '/pages/publish/publish'
		});
		
	}
	
	const clear = async()=>{
		let goods = [{}]
		const res = await buyone(goods)
		// 清空本地存储中所有数据
		uni.clearStorageSync();
		nums.value = 0
		totals.value = 0
	}
	
	


</script>